<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!--重要meta, 必须!-->
    <meta name="viewport" content="width=320, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,shrink-to-fit=no" />
    <title>地铁图</title>
</head>
<body>
    <div id="mybox"></div>
	<div id="citybox" style="height: 40px;position: fixed;background: #efeff4;border: 2px solid #2F85FC;color: #2F85FC;border-radius: 10px;top: 55px;right: 8px;z-index: 999;line-height: 40px;text-align: center;padding-left: 5px;padding-right: 3px;">
		<span id="cityText"></span>
		<img src="img/unfold.png" style="width: 26px;vertical-align: middle;margin-top: -2px;"/>
	</div>
    <script src="https://webapi.amap.com/subway?v=1.0&key=c9c3f9d001f79484b5cde6a12ca94444&callback=cbk"></script>
	
	<!-- uni 的 SDK -->
	<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.0.js"></script>	
		
	<script src="js/mui.min.js"></script>
	<script src="js/mui.picker.min.js"></script>
    <script type="text/javascript">
	mui.init({
		keyEventBind: {
			backbutton: false //关闭back按键监听
		}
	});
    window.cbk = function() {
		var defaultCity = {value:4401, text:'广州'};
        var mySubway = subway("mybox", {
            adcode: getQueryString("adcode") || defaultCity.value,
            theme: "colorful",
            client: 0,
            doubleclick: {
                switch: true
            }
        });
		
		mySubway.getCityList(function(res){
			var cityData = [];
			for (let city in res) {
				cityData.push({value: city, text: res[city].name});
			}
			console.log(JSON.stringify(cityData))
		});

        //地铁加载完成，执行complete事件
        mySubway.event.on("subway.complete", function(ev, info) {
            var id = info.id;
        });

        //点击站点，显示此站点的信息窗体
        mySubway.event.on("station.touch", function(ev, info) {
            var id = info.id;
            mySubway.stopAnimation();
            mySubway.addInfoWindow(id, {});
            var center = mySubway.getStCenter(id);
            mySubway.setCenter(center);
        });

        //点击线路名，高亮此线路
        mySubway.event.on("lineName.touch", function(ev, info) {
            mySubway.showLine(info.id);
            var select_obj = qs('#g-select');
            mySubway.setFitView(select_obj);
            var center = mySubway.getSelectedLineCenter();
            mySubway.setCenter(center);
        });

        //点击空白, 关闭infowindow
        mySubway.event.on("subway.touch", function() {
            mySubway.clearInfoWindow();
        });

        //设置起点
        mySubway.event.on("startStation.touch", function(ev, info) {
            mySubway.stopAnimation();
            mySubway.clearInfoWindow();
            mySubway.setStart(info.id, {});
            startInfo = info;
            route();
        });

        //设置终点
        mySubway.event.on("endStation.touch", function(ev, info) {
            mySubway.stopAnimation();
            mySubway.clearInfoWindow();
            mySubway.setEnd(info.id, {});
            endInfo = info;
            route();
        });

        mySubway.event.on("subway.routeComplete", function(ev, info) {
            console.log("routeComplete");
        });

        //路线规划
        var startInfo = {},
            endInfo = {};
        function route() {
            if (startInfo.id && endInfo.id) {
                mySubway.route(startInfo.id, endInfo.id, {});
                startInfo = {};
                endInfo = {};
            }
        }

        function getQueryString(name) { 
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
            var r = window.location.search.substr(1).match(reg); 
            if (r != null) 
                return unescape(r[2]); 
            return null; 
        }
		
		var cityDate = [{"value":"1100","text":"北京"},{"value":"1200","text":"天津"},{"value":"1301","text":"石家庄"},{"value":"2101","text":"沈阳"},{"value":"2102","text":"大连"},{"value":"2201","text":"长春"},{"value":"2301","text":"哈尔滨"},{"value":"3100","text":"上海"},{"value":"3201","text":"南京"},{"value":"3202","text":"无锡"},{"value":"3205","text":"苏州"},{"value":"3301","text":"杭州"},{"value":"3302","text":"宁波"},{"value":"3303","text":"温州"},{"value":"3401","text":"合肥"},{"value":"3501","text":"福州"},{"value":"3502","text":"厦门"},{"value":"3601","text":"南昌"},{"value":"3702","text":"青岛"},{"value":"4101","text":"郑州"},{"value":"4201","text":"武汉"},{"value":"4301","text":"长沙"},{"value":"4401","text":"广州"},{"value":"4403","text":"深圳"},{"value":"4406","text":"佛山"},{"value":"4419","text":"东莞"},{"value":"4501","text":"南宁"},{"value":"5000","text":"重庆"},{"value":"5101","text":"成都"},{"value":"5201","text":"贵阳"},{"value":"5301","text":"昆明"},{"value":"6101","text":"西安"},{"value":"6501","text":"乌鲁木齐"},{"value":"8100","text":"香港"}] ;
		var city_picker2 = new mui.PopPicker({layer:1});
		city_picker2.setData(cityDate);
		function changeCity(){
			setTimeout(function(){
				city_picker2.show(function(items){
					console.log((items[0] || {}).value);
					console.log((items[0] || {}).text);
					//$("#city_id2").val((items[0] || {}).value);
					//$("#city_text2").html((items[0] || {}).text);
					mySubway.setAdcode((items[0] || {}).value);
				});
			},200);
		}
		
		document.getElementById("cityText").innerHTML = defaultCity.text;
		document.getElementById("citybox").onclick = function(){
			setTimeout(function(){
				city_picker2.show(function(items){
					console.log((items[0] || {}).value);
					console.log((items[0] || {}).text);
					//$("#city_id2").val((items[0] || {}).value);
					//$("#city_text2").html((items[0] || {}).text);
					mySubway.setAdcode((items[0] || {}).value);
					document.getElementById("cityText").innerHTML = (items[0] || {}).text;
				});
			},200);
		};
    };
    </script>
</body>
<link rel="stylesheet" type="text/css" href="css/mui.picker.css"/>
<link rel="stylesheet" type="text/css" href="css/mui.min.css"/>

</html>